<template>
  <div id="cont">
    <div>
      <Form
        ref="detail"
        :rules="formValidate"
        :label-width="140"
        :model="detail"
      >
        <Row
          wrap
          style="align-items: flex-start;margin-bottom:5px;display:block"
        >
          <Col :lg="8" :xs="24">
            <FormItem prop="image" :label-width="50">
              <div class="detail-image-box">
                <viewer :images="detail.image">
                  <img
                    style="max-width:100%;max-height:230px"
                    :src="detail.image"
                  />
                </viewer>
              </div>
            </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
            <FormItem label="名称" prop="name">
              <Input v-model="detail.name" readonly />
            </FormItem>
            <FormItem label="时间" prop="time">
              <Input
                type="number"
                v-model.number="detail.time"
                style="width:100%"
                :max="1000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="车速(km/h)" prop="speed">
              <Input
                type="number"
                v-model.number="detail.speed"
                style="width:100%"
                :max="1000"
                :min="0"
                readonly
              />
            </FormItem>
          </Col>
          <Col :lg="8" :xs="24">
            <FormItem label="载荷(kg)" prop="load">
              <Input
                type="number"
                v-model.number="detail.load"
                style="width:100%"
                :max="1000"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem label="坡度(%)" prop="gradient">
              <Input
                type="number"
                v-model.number="detail.gradient"
                style="width:100%"
                :max="100"
                :min="0"
                readonly
              />
            </FormItem>
            <FormItem :label-width="30">
              其他人是否可见
              <i-switch
                v-model="detail.isIndexShow"
                :true-value="1"
                :false-value="0"
                disabled
              />
              其他人是否可用
              <i-switch
                v-model="detail.otherCanUse"
                :true-value="1"
                :false-value="0"
                disabled
              />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </div>

    <!-- 曲线图   -->
    <DrivingCycleTable
      :drivingCycleId="drivingCycleId"
      :isUpdate="isUpdate"
    ></DrivingCycleTable>
  </div>
</template>

<script>
import { drivingCycleApi } from "@/api/driving-cycle";
import DrivingCycleTable from "./components/driving-cycle-table";
export default {
  name: "DrivingCycleDetail",
  components: { DrivingCycleTable },
  props: {
    /* id:{type:String} */
  },
  data() {
    return {
      id: null,

      detail: {}, // 发动机详情
      // 表单验证
      formValidate: {
        // 名称
        name: [{ required: true, message: "请输入名称", trigger: "change" }],
        // 时间
        time: [
          {
            type: "number",
            required: true,
            message: "请输入时间",
            trigger: "change"
          }
        ],
        speed: [
          {
            type: "number",
            required: true,
            message: "请输入车速(km/h)",
            trigger: "change"
          },
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],
        load: [
          {
            type: "number",
            min: 0,
            max: 1000,
            message: "请输入0到1000的数字",
            trigger: "change"
          }
        ],
        gradient: [
          {
            type: "number",
            min: 0,
            max: 100,
            message: "请输入0到100的数字",
            trigger: "change"
          }
        ],
        // 图片
        image: [{ required: true, message: "请上传图片", trigger: "change" }]
      },

      drivingCycleId: null,
      isUpdate: false
    };
  },
  created() {
    this.drivingCycleId = this.$route.query.id;
  },
  watch: {},
  mounted() {
    this.id = this.$route.query.id;
    this.getDetail();
  },
  methods: {
    // 获取发动机详情数据
    getDetail() {
      drivingCycleApi.getById(this.id).then(res => {
        this.detail = res.data;
        this.detail.createUser == this.$store.state.user.userLoginInfo.id
          ? (this.isUpdate = true)
          : (this.isUpdate = false);
      });
    }
  }
};
</script>
<style>
.sortable-row-demo .drag-btn {
  cursor: move;
  font-size: 12px;
}
.sortable-row-demo .vxe-body--row.sortable-ghost,
.sortable-row-demo .vxe-body--row.sortable-chosen {
  background-color: #dfecfb;
}
</style>
<style>
#cont {
  background-color: #fff;
  padding: 30px 30px 0 30px;
}

.tb-row1 {
  border: 1px solid #eee;
}

.tb-row1 > div {
  border-right: 1px solid #eee;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  padding-left: 10px;
}

.tb-row1 > div:first-child {
  color: #666;
  background: #f5f5f5;
  text-align: center;
  font-weight: bold;
}

.tb-row1 > div:nth-child(3) {
  color: #666;
  background: #f5f5f5;
  text-align: left;
  font-weight: bold;
  text-align: center;
}

.tb-row1 > div:last-child {
  border-right: 0;
}

.form-ex {
  margin-bottom: 20px;
}

.form-ex > div {
  width: 100px;
  display: inline;
}

.tab-detail {
  margin-bottom: 50px;
}
.tab-detail input {
  background-color: #f4f4f4 !important;
}
.tab-detail span {
  color: #000 !important;
}
.tab-detail i {
  display: none !important;
}
.detail-image-box {
  width: 100%;
  margin-bottom: 10px;
  height: 230px;
  border: 1px dashed #dcdee2;
  text-align: center;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 10px;
}
</style>
